<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:Vue</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h1 id="-">安装</h1>
<pre><code class="lang-html">&lt;!-- 通过script标签导入即可 --&gt;
</code></pre>
<h2 id="vue-config">vue.config</h2>
<p>每个应用实例都会暴露一个<code>config</code>对象，其中包含了对这个应用程序的配置设定。可以在挂载应用之前更改这些属性</p>
<h2 id="productiontip">productionTip</h2>
<p>生产提示，默认开启，也就是说，会在控制台给出提示，只要在挂载应用前将它关闭就不会了</p>
<h2 id="-">实例</h2>
<p>一个vue容器不能同时接管两个容器
容器与实例之间的关系是一一对应的</p>
<p>插值表达式中必须是js表达式
不仅仅可以是data中的数据</p>
<h1 id="-">模板语法</h1>
<ol>
<li><p>插值语法
 功能：用于解析标签体内容</p>
</li>
<li><p>指令语法
 用于解析标签</p>
</li>
</ol>
<h2 id="-">单项绑定数据</h2>
<p>v-bind</p>
<h2 id="-">双向绑定数据</h2>
<p>v-model
注意：只能用在表单类元素上</p>
<h2 id="el-data-">el和data的两种写法</h2>
<pre><code class="lang-js">v.$mount = &#39;el表达式&#39;
</code></pre>
<h2 id="-">配置用户代码片段</h2>
<p>通过配置用户代码片段可以快速生成代码
<img src="http://qi.zengzeng.pro/vscode/20230330194128.png" alt="20230330194128">
<img src="http://qi.zengzeng.pro/vscode/20230330194156.png" alt="20230330194156"></p>
<pre><code class="lang-js">    &quot;Print to console&quot;: {
        &quot;scope&quot;: &quot;javascript,typescript&quot;,   //作用域
        &quot;prefix&quot;: &quot;v1&quot;,                     //触发关键词
        &quot;body&quot;: [                           //代码体
            &quot;new Vue({&quot;,
            &quot;    el:\&quot;app\&quot;,&quot;,
            &quot;    data(){&quot;,
            &quot;        return {&quot;,
            &quot;        }&quot;,
            &quot;    }&quot;,
            &quot;})&quot;
        ],
        &quot;description&quot;: &quot;基本vue实例&quot;
    }

</code></pre>
<h2 id="-">插值表达式</h2>
<p>data中的值兜兜转转最终会挂载到vm身上
也就是说插值表达式能获取到vm身上的值</p>
<h2 id="object-defineproperty-obj-ptnmae-ptconfig-">Object.defineProperty(Obj,ptNmae,ptConfig); 为对象挂载一个属性</h2>
<p>用这个方法定义的属性是不可以被枚举的</p>
<pre><code class="lang-js">Object.defineProperty(book,&#39;publish&#39;,{
    //在这里可以对该属性进行丰富的配置
    value:&#39;JX&#39;, //值
    enumerable:true,        //是否可以被枚举 默认不可
    writable:true,          //是否可以被修改，默认不可
    configurable:true,       //是否可以被删除，默认不可
    get:()=&gt;{},          //get属性在有人获取该值时候会被调用，且该属性不可与value属性同时存在     
    set:()=&gt;{},         //当用于意图修改该值时该方法就会被
    执行     

})
</code></pre>
<h2 id="-v-model">手动实现v-model</h2>
<h3 id="-">思路</h3>
<p>创建一个data对象，在其中填写我们要绑定的数据
例如str 
并定义另一个属性str</p>
<pre><code class="lang-js">var str
var data = {
}
//利用Object.defineProperty的方式创建get和set方法
//在set方式中修改表单的值，这样就实现了数据的单项绑定
//添加表单的键盘监听事件实现表单的双向绑定
</code></pre>
<h3 id="v-on-">v-on: @ 的事件修饰符</h3>
<ul>
<li>prevent:阻止默认事件</li>
<li>stop 阻止事件冒泡</li>
<li>once 时间只会被触发一次</li>
<li>capture使用时间的捕获模式</li>
<li>self 只有event,target是当前操作的元素时才会触发时间</li>
<li>passive 时间的默认行为立即执行，无需等待时间回调执行完毕</li>
</ul>
<h2 id="-">为按键添加别名</h2>
<p>Vue.config.keyCodes.huiche=13;</p>
<h2 id="-">监视属性</h2>
<p><strong>watch</strong> 英：“观察”
这里作为监视的意思
挂载到vm上</p>
<pre><code class="lang-js">vm({
    watch:{

        &#39;监视的属性名称&#39;:{
            immediate:ture,//该配置为true时，在数据初始化时会调用handler函数
            deep:true,    //深度监视，该配置为true时会监视已经被监视的属性中的其他属性的变化
            handler:function(newV,oldV){
                //当被监视的值改变时这里会执行
                //并传入新值与旧值
            }
        }
    }
})

</code></pre>
<h2 id="v-for">v-for</h2>
<p><strong>解构写法</strong></p>
<pre><code>v-for=&quot;({e1,e2},index) in arr&quot;
</code></pre><p><strong>接收范围值</strong>
v-for可以直接接收一个整数值。在这种用例中，会将该魔棒就<code>1...n</code>的取值范围重复多次</p>
<pre><code class="lang-html">&lt;h1 v-for=&quot;n in 10&quot;&gt;{{n}}&lt;/h1&gt;
</code></pre>
<p>注意这里n是从0开始的</p>
<h3 id="v-for-key-">v-for中key的作用</h3>
<h2 id="-">常用指令</h2>
<h3 id="v-for">v-for</h3>
<h3 id="v-text">v-text</h3>
<h3 id="v-html">v-html</h3>
<h3 id="v-on">v-on</h3>
<h3 id="v-bind">v-bind</h3>
<h3 id="v-href">v-href</h3>
<h3 id="v-clock">v-clock</h3>
<p>直接写，没有值
在vue加载的一瞬间删除该属性
通过它结合css实现在加载vue之前不显示结构
[v-cloak] 属性选择器
[v-cloak] {
    display:none
}</p>
<h1 id="-">自定义指令</h1>
<p>v-开头</p>
<h2 id="-">配置项</h2>
<p><strong>directives</strong> 
directives 英：指令
在这其中可以配置各种各样的指令
例如</p>
<pre><code class="lang-js">directives:{
    //配置了一个名为v-big的指令
    //该指令使得dom元素文本为绑定属性值*10
    big(dom,val){    //接收两个参数 一个是dom 一个是绑定的值
        dom.innerText = val.value*10
    }
}
</code></pre>
<p><strong>指令调用时间</strong></p>
<ul>
<li>初次绑定时</li>
<li>指令所在的模板被重新解析时</li>
</ul>
<p><strong>对象写法</strong></p>
<pre><code class="lang-js">directives:{
    big:{
        bind(){
            //绑定时调用
        },
        inserted(){
            //插入页面时调用
        },
        update(){
            //更新时调用 模板重新解析时
        }
    }
}
</code></pre>
<p><strong>注意：</strong></p>
<ul>
<li>指令名不要用驼峰命名法</li>
<li>多个单词用-拼接</li>
<li>指令函数中的this都是window
<strong>Vue.directive(&#39;&#39;,{})</strong>
配置全局指令
<strong>Vue.filter(&#39;&#39;,{})</strong>
配置全局过滤器</li>
</ul>
<h1 id="-">生命周期</h1>
<h2 id="beforecreated-">beforeCreated 创建之前</h2>
<h2 id="created-">created 创建完成</h2>
<h2 id="beforemount-">beforeMount 挂载之前</h2>
<h2 id="mounted-">mounted 挂载完成</h2>
<h2 id="beforeupdate-">beforeupdate 数据更新之前</h2>
<p>此时数据是新的但是页面还是旧的</p>
<h2 id="updated-">updated 数据更新之后</h2>
<h2 id="beforedestory-">beforeDestory 销毁之前</h2>
<h2 id="destoryed-">destoryed 销毁之后</h2>
<h1 id="-">组件化编程</h1>
<h2 id="-">定义</h2>
<p>实现应用中局部功能代码和资源的集合
组件可以产生嵌套</p>
<h2 id="-">创建</h2>
<pre><code class="lang-js">const componentName = Vue.extent({
    //TODO:在这里面的配置项基本和vm中的配置项一致
    //注意这里没有el
    template:``,//这里放置组件的html字符串
    data(){        //注意这里的data只能用函数的写法
        return {

        }
    },
    // .....
})

//组件的使用
//注册
new Vue({
    el:&#39;app&#39;,
    components:{
        componentName    
    }
})
//此时在html页面之中直接写入标签
// &lt;componentName&gt;&lt;/componentName&gt;
//即可使用组件
//全局注册
vue.component(&#39;componentName&#39;,component)
</code></pre>
<h2 id="-html">非单文件组件    .html</h2>
<p>一个文件中包含n个组件</p>
<h2 id="-vue">单文件组件 .vue</h2>
<p>一个文件中只包含一个组件</p>
<h2 id="-">注册全局组件</h2>
<p>vue.component(name,obj);</p>
<h2 id="-">注意点：</h2>
<h3 id="-">推荐组件名：</h3>
<pre><code>单个单词：纯小写 首字母大写
多个单词： &#39;全小写-连接&#39; 大驼峰命名法（只有脚手架能用）
回避已知元素 例如 h1 div span p ...
通过name属性配置组件名
</code></pre><h3 id="-">简写</h3>
<pre><code class="lang-js">const stu = Vue.extent({})
//可以简写为：
const stu = {};
</code></pre>
<h2 id="-">组件嵌套</h2>
<h2 id="vuecomponent">VueComponent</h2>
<p>组件的本质是一个构造函数
VueComponent(options){</p>
<p>}
在vue解析模板的时候
vue会自动帮我们用new关键字创建实例
每次调用Vue.extend都会产生一个全新的组件
在组件中this指向的都是VueComponent
在VM中可以通过Children属性来管理子组件</p>
<h2 id="-">一个重要的内置关系</h2>
<p>vc!=vm 长得像但不一样</p>
<p>在js中创建一个函数，同时也会创建一个原型对象
通过函数.prototype来访问原型对象
而一个原型对象也会有原型对象，它的原型对象取决于它的缔造者
如果只是一个普通的原型对象那么它的原型对象就是Object
对象的原型对象通过.<strong>proto</strong>来访问</p>
<p>在使用Vue.extend来创建组件时，它返回的是一个VueComponent函数
每次创建时返回的函数都是全新的，
这个函数的原型对象也就是.prototype 就是一个普通的原型对象
它以及该函数创建的组件实例 指向的 都是同一个原型对象</p>
<p>Vue 本身是一个方法所以他也有.prototype原型对象
而这个原型对象 也是上述组件vm原型对象的原型对象
也就是说
Vue.prototype === vc.prototype.__proto__</p>
<p>通过这个关系
可以使得在Vue原型对象中配置的属性全部组件可用
Vue.prototype.a = vc.a</p>
<h2 id="-vue">单文件组件 .vue</h2>
<h1 id="-vue-cli-command-line-interface-">脚手架 Vue cli (command line interface) 命令行接口工具</h1>
<p>vue标准化开发工具</p>
<h2 id="-">安装</h2>
<pre><code>npm i @vue/cli -g
</code></pre><p>此时就得到了一个全局的vue，命令</p>
<h2 id="-">创建项目</h2>
<pre><code>vue create 项目名称
</code></pre><p>模板解析器的体积占据了vue1/3的代码
在开发完成之后就不需要模板解析器了
所以默认情况下导入的是精简版的模板解析器
runtime 运行时vue都没有模板解析器
render渲染函数是用于模板解析的</p>
<h2 id="-vue-">关于不同版本的vue：</h2>
<h3 id="vue-js-vue-runtime-xxx-js-">vue.js与vue.runtime.xxx.js的区别</h3>
<ol>
<li>vue.js是完整版的vue。包含：核心功能+模板解析器</li>
<li>vue.runtime.xxx.js是运行版的vue。只包含核心功能，没有模板解析器<h3 id="-vue-runtimexxx-js-template-render-createelement-">因为vue.runtimexxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement去解析指定内容</h3>
</li>
</ol>
<h2 id="-">修改默认配置 ==&gt;需要重新启动项目才能生效</h2>
<p>在vue项目的根目录下创建vue.config.js文件</p>
<pre><code class="lang-js">module.exports = {
    pages:{
        //入口
        index:{
            entry:&#39;/src/main.js&#39;
        }
    },
    //关闭语法检查
    lintOnSave:false
}
</code></pre>
<h2 id="ref">ref</h2>
<p>在标签上注明</p>
<pre><code class="lang-html">&lt;h1 ref=&#39;a&#39;&gt;&lt;h1&gt;
</code></pre>
<p>//获取dom</p>
<pre><code class="lang-js">this.$refs.a
</code></pre>
<p>应用在组件上则获取的是组件元素</p>
<h2 id="props">props</h2>
<p>用于传递属性
可直接在html中编写<br><strong>例如</strong>： </p>
<pre><code class="lang-html">&lt;StuInfo name=&#39;zhangsan&#39;/&gt;
</code></pre>
<p>编写完成之后
需要在组件上声明这个属性</p>
<pre><code class="lang-js">props:[name]
//对象写法，该写法可以控制数据类型，一旦有错会在控制台上输出错误，但依旧该接收还是会接收
props:{
    name:String,
    age:Number
}
//完整写法
props:{
    name:{
        type:String,
        required:false,//是否必须要传递
        default:&quot;默认值&quot;
    }
}
</code></pre>
<p><strong>注意：</strong>在传递Number类的值时，在html中的属性前面应当加上:绑定修饰符，这样里面的值才会被识别为js表达式，进而识别为Number</p>
<pre><code class="lang-html">&lt;StuInfo :age=&#39;18&#39;/&gt;
</code></pre>
<h2 id="mixin-">mixin 混入</h2>
<p>有些东西是多个组件复用的，这些东东可以提取出来成为一个或者多个js混合文件</p>
<h2 id="-">全局混合</h2>
<p>在main.js中引入混合js文件
并使用
Vue.mixin(混合文件)进行注册，在这注册的混合文件全局可用</p>
<h2 id="-">插件</h2>
<p>本质上就是一个对象 {}
对象中必须包含install方法
<code>plugins.js</code></p>
<pre><code class="lang-js">export default {
    install(Vue){
        //主要是对Vue进行操作
        //可以为其添加指令，混入，过滤器等等
    }
}
</code></pre>
<p><code>在main.js中使用</code></p>
<pre><code class="lang-js">import plugins ·····
Vue.use(plugins)
</code></pre>
<h2 id="scoped-">scoped 作用域</h2>
<p>用于解决样式冲突
在style标签中添加这个属性之后，该标签中的所有样式只在本组件中生效
此属性不使用与Vue组件</p>
<h1 id="-">浏览器本地存储</h1>
<h2 id="window-localstorage">Window.localStorage</h2>
<p><strong>英文这个对象位于window中所以可以直接调用</strong></p>
<h3 id="-">存储    键值对都是字符串</h3>
<pre><code class="lang-js">localStorage.setItem(&#39;key&#39;,&#39;value&#39;)
</code></pre>
<h3 id="-">查询</h3>
<pre><code class="lang-js">localStorage.getItem(&#39;key&#39;)
</code></pre>
<h3 id="-">删除</h3>
<pre><code class="lang-js">localStorage.removeItem(&#39;key&#39;)
</code></pre>
<h3 id="-">移除所有</h3>
<pre><code class="lang-js">localStorage.clear();
</code></pre>
<h2 id="sessionstorage">sessionStorage</h2>
<p>临时存储</p>
<h2 id="-">自定义事件 组件的</h2>
<ol>
<li>在父组件中添加一个事件函数<pre><code class="lang-js">methods:{
 shijian(str){
     console.log(&#39;事件激活了,数据是&#39;,str)
 }
}
</code></pre>
</li>
<li><p>将该数据函数通过v-on绑定到组件上</p>
<pre><code class="lang-js">&lt;ChildComponent @shijian=&quot;shijian&quot;/&gt;
</code></pre>
</li>
<li><p>在子组件中通过this.$emit(&#39;事件名&#39;,value)激发事件</p>
<pre><code class="lang-js">mounted(){
 this.$emit(&#39;shijian&#39;,&#39;传递的值&#39;)
}
</code></pre>
</li>
</ol>
<h3 id="-">解绑</h3>
<p><strong>$off</strong> 这个单词本身就有关闭的意思
通过它可以给自定义事件解绑</p>
<ol>
<li>解绑单个<pre><code class="lang-js">this.$off(&#39;shijian&#39;)
</code></pre>
</li>
<li>解绑多个<pre><code class="lang-js">this.$off(&#39;shijian&#39;,&#39;shijian2&#39;)
</code></pre>
</li>
<li>解绑所有<pre><code class="lang-js">this.$off()
</code></pre>
</li>
</ol>
<p><strong>注意：</strong>vc被销毁后，所有自定义事件也会被销毁
原生事件不受影响</p>
<p>在组件中绑定原生事件需要在事件末尾添加.native修饰符，则会被当做自定义事件处理</p>
<h1 id="-">全局事件总线</h1>
<p>注意在vue3之后无法通过new App创建实例也就是说无法访问原型<br>替代方案
<strong>mitt</strong> 第三方事件处理器</p>
<pre><code>
</code></pre><p><strong>本质：</strong>全局事件总线的本质就是自定义事件</p>
<h1 id="-">消息的订阅与发布</h1>
<ol>
<li>订阅消息：消息名</li>
<li>发布消息：消息内容</li>
</ol>
<h2 id="pubsub-js"><strong>pubsub-js</strong></h2>
<h3 id="-subscribe">订阅消息 subscribe</h3>
<pre><code class="lang-js">pubsub.subscribe(&#39;消息名称&#39;,function(name,data){

})
</code></pre>
<h3 id="-publish">发布消息 publish</h3>
<pre><code class="lang-js">pubsub.publish(&#39;消息名称&#39;,data)
//以同步方式发布
pubsub.publishSync()
</code></pre>
<h3 id="-">取消订阅</h3>
<pre><code class="lang-js">//通过消息id取消
pubsub.unsubscribe(pubId);
//清除所有订阅
pubsub.clrearAllSubcariptions()
</code></pre>
<h2 id="-nexttick-">$nextTick 下一轮</h2>
<p>其指定的节点会在dom更新之后再执行</p>
<h1 id="-">过度与动画</h1>
<h1 id="-">代理服务器</h1>
<p>vue中所谓的代理服务器，指的是在前端发送的请求，vue会自动开启
一个后端服务器去代理发送，
<strong>前端页面=》vue服务器=》目标服务器=》vue服务器=》前端页面</strong>  </p>
<p>配置相当简单，但也要多加记忆</p>
<h2 id="vue-config-js-">vue.config.js 配置法</h2>
<p>该方法适合在vue2项目中使用，因为vue3默认是没有这个文件的
反正我是没找到
//对象=》开发服务=》代理=》代理路径=》配置</p>
<pre><code class="lang-js">module.exports = {
    devServe:{
        proxy:{
            &#39;/api&#39;:{
                target:&#39;服务器&#39;,
                changeOrigin:&#39;true&#39;,//实际上这东西默认就是true，有了它服务器会告诉目标服务器，自己和它是同源的，也就是对目标服务器进行一个欺骗.
                pathRewirte:{    //路径重写，这里传入一个对象，用来修改原来的路径
                    &#39;^/api&#39;:&#39;&#39;
                }
            }
        }
    }
}
</code></pre>
<h2 id="vite-config-js">vite.config.js</h2>
<p><strong>这个配置方法vue3更适用</strong>
server=》proxy=》目标路径=》代理配置</p>
<pre><code class="lang-js">export default {
    server:{
        proxy:{
            &#39;/api&#39;:{
                target:&#39;目标路径&#39;,
                changOrigin:true,
                rewite:path=&gt;修改后的路径
            }
        }
    }
}

</code></pre>
<h1 id="-">插槽</h1>
<p>所谓插槽，就是在子组件创建一个槽\&lt;slot>\&lt;\/slot>等待父组件插入内容</p>
<h2 id="-">基本插槽</h2>
<h2 id="-">具名插槽</h2>
<h2 id="-">作用域插槽</h2>
<h1 id="vuex">vuex</h1>
<p>一个用于共享数据的vue官方开发的插件</p>
<h2 id="-">安装</h2>
<pre><code>npm i vuex@3 
&lt;!-- 注意vue2用vuex3，vue3用Vuex4,不然报错 --&gt;
</code></pre><h2 id="-">配置</h2>
<ol>
<li>创建配置文件store-&gt;index.js
<code>`</code>js
import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
Vue.use(Vuex)</li>
</ol>
<p>//三大对象
//使用store.dispath调度方法访问
//是三大对象中的第一层对象
//支持异步的方法处理
//主要是对操作state的数据进行一个预先处理
const actions = {
    //方法会先接收到一个上下文对象，其中包含了一些store的方法等
    //剩余的参数为dispath传递的参数
    addNum(ctx,param){
        //通过上下文中的commit方法将任务转交到mutations的手中
        ctx.commit(&#39;addNum&#39;,param)
    }
}</p>
<p>//第二大对象
//负责直接对state中的数据进行修改
//通过commit进行访问
const mutations = {
    addNum(state,param){
        //TODO:update state
    }
}</p>
<p>//第三大对象
//负责存储数据
const state = {
    num:0
}</p>
<p>//主要管理对象
const store = new Vuex.Store({
    state,mutations,actions
})</p>
<p>export default store</p>
<pre><code>

# 路由
## **Vue-router**
**一个插件库**  
专门用来实现spa应用
## **spa应用**
1. 单页面web应用（single page web application ，SPA）
2. 整个应用只有**一个完整的页面**
3. 点击页面中的导航不会刷新页面，只会做页面的局部更新
4. 数据需要通过ajax请求获取

## **基本使用**
1. 下载安装
2. 引用并use
3. 创建路由文件定义路由
4. 定义router-link修改路径
5. 定义router-view展示视图

## 在Vue3中的使用
与vue2大致是相同的，但是它的路由中多了一项配置，叫做history历史  
**基本写法**
```js
import { createRouter,createWebHistory} from &#39;vue-router&#39;
const router = createRouter({
    history:createWebHistory
})
</code></pre>
          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>